<template>
  <div>
    <!--父组件往子组件  -->
    {{ numActive }}对象utilss.a等于---{{utilss.a}}---,utilss.b等于---{{utilss.b}}---
    <p @click="childs">子传父</p>
    <h1>这里是 provide inject 姓名{{myName}} 永远{{name}},年龄{{age}},高{{height}}</h1>
  <button @click='changeName'>changeName</button>
  </div>
</template>


<script>
import {inject, onMounted, getCurrentInstance, reactive,watch } from "vue";
export default {
  name: "navHeaders",
  props: {
    numActive: null,
    utilss:Object //接受的父元素不用在setup return出去
  },

  mounted(){},

  emits: {
    //声明 否则回报警告
    changeval: Function
  },
  setup(props, context) {
    // watch() 
    const myName = inject('myName','myName') 
    console.log(myName)
    const name = inject('name','无名')
    console.log(name)
    const age = inject('age',18)
    const height = inject('height',185)
    const changeName = inject('providechangeName')


    onMounted(()=>{
      // console.log('inject的值接受provide'+name.value)
    })
    const childsNum = reactive({
      childlist: 10
    });
    // console.log(context); //这里的ctx 与getCurrentInstance() 不是一个东西

    const {ctx} = getCurrentInstance(); //这里获取测ctx是组件的实例
    // console.log(ctx.utils.plus(1,2));  //当父组件传递过来的与utils冲突是父组件的有优先级更高
    // console.log(ctx);


    // 子传父
    const childs = () => {
      let getnum = childsNum.childlist++;
          context.emit("changeval", getnum);
          // console.log(getnum)
    };

    onMounted(() => {
      childs();
      // console.log(props.numActive)
      // console.log('自动执行')
    });
  // 监听父组件的变化
    watch(() => props.numActive,(a,b) => {
    console.log(a,b)
    },{deep:true} 
    );

    return {
      childsNum,
      childs,
      context,
      name,
      age,
      height,
      changeName,
      myName
    };
  }
};
</script>

<style>
</style>